import React from 'react';  
import ReactDOM from 'react-dom';
import FolderStore from "../stores/FolderStore";
import PermissionMixin from "./PermissionMixin";
    var ContextMenuItem = React.createClass({
        mixins: [  
            PermissionMixin()  
        ],  
        onClick: function(){
            this.props.onClick();
        },
        componentWillUnmount: function(){            
        },
        render : function(){
            return (<li onClick={this.onClick} className={this.isShow(this.props.bShow)}>
                        {this.props.children}                          
                    </li>)
        }
    });
export default React.createClass({
        mixins: [  
            PermissionMixin()  
        ],  
        getInitialState: function () {                
            return {
                data: null,  
                mounting: false
            };
        },     
		componentDidMount: function(){
			$(ReactDOM.findDOMNode(this)).on("position", this.onPosition);
            //FolderStore.selectedObjectChanged(this.onSelectedObjectChanged);
            this.state.mounting = true;
		},
		componentWillUnmount: function(){
			$(ReactDOM.findDOMNode(this)).off("position", this.onPosition);
            //FolderStore.selectedObjectChanged(this.onSelectedObjectChanged, false);
            this.state.mounting = false;
		},
        onSelectedObjectChanged: function(event, data){
            if (!this.state.mounting) return;            
            this.setState({data: data}) 
        },
        onPosition: function(event, data) {           
            this.setState({data: FolderStore.getSelectedObject()})  
            var _this = this;
            _.defer(function() {
                    if (_this.isAdmin(_this.state.data) || (_this.isDocument(_this.state.data) && _this.isSingle(_this.state.data)) || _this.isWritable(_this.state.data)) {
                        var $element = $(ReactDOM.findDOMNode(_this));
                        var height = $element.height();
                        var width = $element.width();
                        var $container = $(window);
                        if ((data.top + height) > $container.height()) {
                            data.top = $container.height() - height;
                        }
                        if ((data.left + width) > $container.width()) {
                            data.left = $container.width() - width;
                        }
                        $element.css({
                            "left": data.left + 5,
                            "top": data.top
                        }).show();
                    }
                })            
        },
		removeObject: function(){
            if (this.state.data[0].type === "cmis:folder"){
                window.removeFolder(this.state.data[0]);
            }
            else{
                window.removeDocument(this.state.data);
            }
        },
        downDocument: function(){
            CMISService.downloadDocument(this.state.data[0]);
        },
        downOriginalDocument: function(){
            CMISService.downOriginalDocument(this.state.data[0]);
        },
        uploadNewVersion: function(){
            window.uploadNewVersion(this.state.data[0]);
        },
        moveObject: function(){
            window.moveObject(this.state.data[0]);
        },
        createFolder: function(){
            window.createFolder(this.state.data[0]);
        },
        setAcl: function(){
            window.setAcl(this.state.data[0]);
        },
        uploadDocument: function() {
            window.uploadDocument(this.state.data[0]);
        },
        preview: function(){
            window.previewByDocumentId(this.state.data[0].id);
        },
        fillDoc: function(){
            window.fillDoc(this.state.data[0]);
        },
        rename: function(){
        	FolderStore.rename(this.state.data[0]);        	
        },
        viewHistory: function(){
            window.viewHistory(this.state.data[0]);
        },              
		render: function(){			
            var data = this.state.data;
			return (
					<ul id="menu-document" className="dropdown-menu" style={{position:'fixed'}}>
                        <ContextMenuItem key="new-foler" onClick={this.createFolder} bShow={this.isFolder(data)&&this.isWritable(data)}>              
                            <a href="javascript:void(0)">
                                <i className="fa fa-folder-open"></i>
                                <span>{i18n.t("New folder")}</span>
                            </a>
                        </ContextMenuItem>
                        <ContextMenuItem key="upload-file" onClick={this.uploadDocument} bShow={this.isFolder(data)&&this.isWritable(data)}>
                            <a href="javascript:void(0)">
                                <i className="fa fa-arrow-up"></i>
                                <span>{i18n.t("Upload file")}</span>
                            </a>
                        </ContextMenuItem>
                         <ContextMenuItem key="preview" onClick={this.preview} bShow={this.isDocument(data)&&this.isSingle(data)}>
                            <a href="javascript:void(0)">
                                <i className="fa fa-eye"></i>
                                <span>{i18n.t("Preview")}</span>
                            </a>
                        </ContextMenuItem>
                        <ContextMenuItem key="upload-new-version"  onClick={this.uploadNewVersion} bShow={this.isDocument(data)&&this.isSingle(data)&&this.isWritable(data)}>
                            <a href="javascript:void(0)">
                                <i className="fa fa-arrow-up"></i>
                                <span>{i18n.t("Upload new version")}</span>
                            </a>
                        </ContextMenuItem>        
                        <ContextMenuItem key="download" onClick={this.downOriginalDocument} bShow={this.isDocument(data)&&this.isSingle(data)}>
                                <a href="javascript:void(0)">
                                    <i className="fa fa-file-o"></i>
                                    {i18n.t("Download original format")}
                                </a>
                        </ContextMenuItem>
                        <ContextMenuItem key="download-protected" onClick={this.downDocument} bShow={this.isDocument(data)&&this.isSingle(data)&&this.isDrm(data)}>                       
                            <a href="javascript:void(0)">
                                <i className="fa fa-download"></i>
                                <span>{i18n.t("Download protected copy")}</span>
                            </a>
                        </ContextMenuItem>                       
                        <ContextMenuItem key="delete" onClick={this.removeObject} bShow={this.isWritable(data)&&((this.isFolder(data)&&this.isSingle(data))||this.isDocument(data))}>
                            <a href="javascript:void(0)">
                                <i className="fa fa-trash-o"></i>
                                <span>{i18n.t("Delete")}</span>
                            </a>
                        </ContextMenuItem>
                        <ContextMenuItem key="archive-to" onClick={this.fillDoc} bShow={this.isAdmin(data)&&this.isDocument(data)&&this.isSingle(data)}>
                            <a href="javascript:void(0)">
                                <i className="fa fa-files-o"></i>
                                <span>{i18n.t("Archive to")}</span>
                            </a>
                        </ContextMenuItem>
                        <ContextMenuItem key="move-to"  onClick={this.moveObject} bShow={this.isWritable(data)&&this.isSingle(data)}>
                            <a href="javascript:void(0)">
                                <i className="fa fa-sign-out"></i> 
                                <span>{i18n.t("Move to")}</span>
                            </a>
                        </ContextMenuItem>                                             
                        <ContextMenuItem key="Rename" onClick={this.rename} bShow={this.isWritable(data)&&this.isSingle(data)}>
                            <a href="javascript:void(0)">
                                <i className="fa fa-circle"></i>
                                <span>{i18n.t("Rename")}</span>
                            </a>
                        </ContextMenuItem>     
                        <ContextMenuItem key="Manage-versions" onClick={this.viewHistory} bShow={this.isDocument(data)&&this.isSingle(data)&&this.isWritable(data)&&!this.isDrm(data)}>
                            <a href="#view-history" data-toggle="modal">
                                <i className="fa fa-tachometer"></i>
                                <span>{i18n.t("Manage versions")}</span>
                            </a>
                        </ContextMenuItem>  
                        <ContextMenuItem key="Secure-share" onClick={window.noFinished} bShow={this.isDocument(data)&&this.isSingle(data)}>
                                <a href="javascript:void(0)">
                                    <i className="fa fa-cogs"></i>
                                    <span>{i18n.t("Secure share")}</span>
                                </a>
                        </ContextMenuItem>                      
                        <ContextMenuItem key="Access control"  onClick={this.setAcl} bShow={this.isFolder(data)&&this.isAdmin(data)&&this.isSingle(data)}>
                            <a href="javascript:void(0)">
                                <i className="fa fa-users"></i>
                                <span>{i18n.t("Access control")}</span>
                            </a>
                        </ContextMenuItem>
                    </ul>  );
		}
	});	